<template>
  <ElContainer style="height: 50%" class="check_body">
    <ElMain>
      <PersonalArchivesList @row-click="handlePersonalArchiveRowClick" />
    </ElMain>
  </ElContainer>
  <ElContainer
    style="height: calc(50% - 10px); margin-top: 10px"
    class="check_body"
  >
    <ElMain>
      <HealthArchivesList :personal-archive="personalArchive" />
    </ElMain>
  </ElContainer>
</template>

<script lang="ts" setup>
import PersonalArchivesList from "../Archive/ArchivesList/PersonalArchivesList.vue";
import HealthArchivesList from "../Archive/ArchivesList/HealthArchivesList.vue";
import { ref, toRaw } from "vue";

const personalArchive = ref({});
const handlePersonalArchiveRowClick = (row) => {
  personalArchive.value = toRaw(row);
};
</script>

<style scoped lang="scss">
.check_body {
  :deep(.el-main) {
    padding: 0px !important;
  }
}
</style>
